<?php
/**
 * 单文章页面模板
 */

get_header();
?>

<div class="site-content">
    <div class="content-area">
        <!-- 主容器 -->
        <div class="max-w-7xl mx-auto px-4 py-8 relative">
            <!-- AI 功能按钮组 - 固定在内容区左侧 -->
            <div class="fixed left-[calc((100%-1280px)/2-4.5rem)] top-1/2 -translate-y-1/2 flex flex-col gap-4 z-40">
                <!-- AI 总结 -->
                <button class="flex flex-col items-center p-3 bg-blue-500 hover:bg-blue-600 
                           rounded-xl shadow-lg text-white transition-colors duration-300
                           group relative">
                    <i data-lucide="sparkles" class="w-5 h-5 mb-1"></i>
                    <span class="text-xs">AI总结</span>
                    <span class="absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-sm rounded 
                             opacity-0 invisible group-hover:opacity-100 group-hover:visible 
                             transition-all duration-200 whitespace-nowrap">
                        一键总结文章要点
                    </span>
                </button>

                <!-- AI 分解语料 -->
                <button class="flex flex-col items-center p-3 bg-blue-500 hover:bg-blue-600 
                           rounded-xl shadow-lg text-white transition-colors duration-300
                           group relative">
                    <i data-lucide="split" class="w-5 h-5 mb-1"></i>
                    <span class="text-xs">AI分解语料</span>
                    <span class="absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-sm rounded 
                             opacity-0 invisible group-hover:opacity-100 group-hover:visible 
                             transition-all duration-200 whitespace-nowrap">
                        智能分解学习素材
                    </span>
                </button>

                <!-- AI 翻译 -->
                <button class="flex flex-col items-center p-3 bg-blue-500 hover:bg-blue-600 
                           rounded-xl shadow-lg text-white transition-colors duration-300
                           group relative">
                    <i data-lucide="languages" class="w-5 h-5 mb-1"></i>
                    <span class="text-xs">AI翻译</span>
                    <span class="absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-sm rounded 
                             opacity-0 invisible group-hover:opacity-100 group-hover:visible 
                             transition-all duration-200 whitespace-nowrap">
                        多语言智能翻译
                    </span>
                </button>
            </div>

            <!-- Flex 容器：主内容和侧边栏 -->
            <div class="flex flex-col lg:flex-row gap-8 lg:pl-20">
                <!-- 主内容区 -->
                <main class="flex-1 min-w-0">
                    <article class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                        <!-- 文章头部 -->
                        <header class="px-8 pt-8">
                            <!-- 文章标题 -->
                            <h1 class="text-3xl font-bold text-gray-900 mb-6">
                                <?php the_title(); ?>
                            </h1>

                            <!-- 作者信息和元数据 -->
                            <div class="flex flex-wrap items-center gap-6 text-sm text-gray-500 mb-8">
                                <!-- 作者信息 -->
                                <div class="flex items-center gap-2">
                                    <?php echo get_avatar(get_the_author_meta('ID'), 32, '', '', array(
                                        'class' => 'w-8 h-8 rounded-full'
                                    )); ?>
                                    <span><?php the_author(); ?></span>
                                </div>

                                <!-- AI 质量分 -->
                                <div class="flex items-center gap-2">
                                    <div class="relative">
                                        <!-- 圆形进度条背景 -->
                                        <div class="w-8 h-8 rounded-full border-2 border-gray-100"></div>
                                        
                                        <!-- AI 评分数值 -->
                                        <div class="absolute inset-0 flex items-center justify-center">
                                            <span class="text-sm font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
                                                <?php echo ai_content_get_quality_score(); ?>
                                            </span>
                                        </div>
                                    </div>
                                    <span>AI 质量分</span>
                                </div>

                                <!-- 发布日期 -->
                                <div class="flex items-center gap-1.5">
                                    <i data-lucide="calendar" class="w-4 h-4"></i>
                                    <span><?php echo get_the_date(); ?></span>
                                </div>

                                <!-- 阅读时间 -->
                                <div class="flex items-center gap-1.5">
                                    <i data-lucide="clock" class="w-4 h-4"></i>
                                    <span><?php echo get_post_length(); ?> 分钟阅读</span>
                                </div>

                                <!-- 阅读量 -->
                                <div class="flex items-center gap-1.5">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                    <span><?php echo get_post_views(); ?> 阅读</span>
                                </div>
                            </div>
                        </header>

                        <!-- 文章内容区域 -->
                        <div class="px-8 py-8">
                            <!-- AI 摘要 -->
                            <?php if ($ai_summary = get_post_meta(get_the_ID(), 'ai_summary', true)) : ?>
                            <div class="mb-8 p-4 bg-blue-50 rounded-xl border border-blue-100">
                                <div class="flex items-center gap-2 text-blue-600 text-sm font-medium mb-2">
                                    <i data-lucide="sparkles" class="w-4 h-4"></i>
                                    <span>AI 摘要</span>
                                </div>
                                <p class="text-gray-600 text-sm leading-relaxed">
                                    <?php echo esc_html($ai_summary); ?>
                                </p>
                            </div>
                            <?php endif; ?>

                            <!-- 文章内容 -->
                            <div class="prose prose-lg max-w-none p-6 
                                        prose-headings:text-gray-900 
                                        prose-p:text-gray-600 prose-p:leading-relaxed
                                        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
                                        prose-strong:text-gray-900 prose-strong:font-semibold
                                        prose-ul:text-gray-600 prose-ol:text-gray-600
                                        prose-blockquote:text-gray-600 prose-blockquote:border-blue-500
                                        prose-hr:border-gray-200
                                        prose-img:rounded-xl prose-img:shadow-sm
                                        prose-table:border-gray-200
                                        prose-th:bg-gray-50 prose-th:text-gray-600
                                        prose-td:text-gray-600">
                                
                                <!-- 现代化代码块样式 -->
                                <style>
                                    /* 代码块容器 */
                                    .wp-block-code {
                                        position: relative;
                                        margin: 2rem 0;
                                        border-radius: 8px;
                                        background: #1e1e2e;
                                        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                                    }

                                    /* 代码块头部 */
                                    .code-header {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        padding: 12px 16px;
                                        background: #181825;
                                        border-top-left-radius: 8px;
                                        border-top-right-radius: 8px;
                                        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                                    }

                                    /* 文件路径 */
                                    .code-path {
                                        font-family: ui-sans-serif, system-ui, -apple-system;
                                        font-size: 0.75rem;
                                        color: #cdd6f4;
                                        opacity: 0.8;
                                    }

                                    /* 代码操作按钮组 */
                                    .code-actions {
                                        display: flex;
                                        gap: 8px;
                                        align-items: center;
                                    }

                                    /* 复制按钮 */
                                    .code-copy-button {
                                        display: flex;
                                        align-items: center;
                                        gap: 6px;
                                        padding: 6px 12px;
                                        font-size: 0.75rem;
                                        color: #cdd6f4;
                                        background: rgba(255, 255, 255, 0.1);
                                        border: none;
                                        border-radius: 6px;
                                        cursor: pointer;
                                        transition: all 0.2s ease;
                                    }

                                    .code-copy-button:hover {
                                        background: rgba(255, 255, 255, 0.2);
                                    }

                                    /* 代码内容区域 */
                                    .wp-block-code pre {
                                        margin: 0;
                                        padding: 16px;
                                        overflow-x: auto;
                                        background: transparent;
                                    }

                                    /* 代码文本 */
                                    .wp-block-code code {
                                        font-family: 'JetBrains Mono', ui-monospace, 'Fira Code', monospace;
                                        font-size: 0.875rem;
                                        line-height: 1.7;
                                        color: #cdd6f4;
                                        background: transparent;
                                        text-shadow: none;
                                    }

                                    /* 滚动条样式 */
                                    .wp-block-code pre::-webkit-scrollbar {
                                        height: 8px;
                                    }

                                    .wp-block-code pre::-webkit-scrollbar-track {
                                        background: rgba(255, 255, 255, 0.05);
                                        border-radius: 4px;
                                    }

                                    .wp-block-code pre::-webkit-scrollbar-thumb {
                                        background: rgba(255, 255, 255, 0.1);
                                        border-radius: 4px;
                                    }

                                    .wp-block-code pre::-webkit-scrollbar-thumb:hover {
                                        background: rgba(255, 255, 255, 0.2);
                                    }

                                    /* 行内代码 */
                                    p > code,
                                    li > code {
                                        padding: 2px 6px !important;
                                        font-size: 0.875em !important;
                                        font-weight: 500 !important;
                                        color: #f43f5e !important;
                                        background: #fff1f2 !important;
                                        border-radius: 4px !important;
                                        border: 1px solid #ffe4e6 !important;
                                    }

                                    /* 代码高亮颜色 - Catppuccin 主题 */
                                    .hljs-keyword { color: #cba6f7; }
                                    .hljs-string { color: #a6e3a1; }
                                    .hljs-comment { color: #7f849c; }
                                    .hljs-function { color: #89b4fa; }
                                    .hljs-number { color: #fab387; }
                                    .hljs-operator { color: #94e2d5; }
                                    .hljs-class { color: #f9e2af; }
                                    .hljs-variable { color: #b4befe; }
                                    .hljs-property { color: #89dceb; }
                                    .hljs-punctuation { color: #cdd6f4; }
                                    .hljs-attr { color: #f5c2e7; }
                                    .hljs-tag { color: #f38ba8; }
                                    .hljs-name { color: #eba0ac; }
                                    .hljs-builtin { color: #f5c2e7; }
                                    .hljs-params { color: #cdd6f4; }
                                </style>

                                <?php the_content(); ?>
                            </div>

                            <!-- 文章标签 -->
                            <?php
                            $ai_tags = ai_content_get_tags();
                            foreach ($ai_tags as $tag) :
                            ?>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-600">
                                <?php echo esc_html($tag); ?>
                            </span>
                            <?php endforeach; ?>
                        </div>

                        <!-- 文章底部 -->
                        <footer class="px-8 py-6 bg-gray-50 border-t border-gray-100">
                            <!-- 版权声明 -->
                            <div class="text-sm text-gray-500 mb-6">
                                <p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. 保留所有权利。</p>
                                <p class="mt-1">转载请注明来源：<a href="<?php the_permalink(); ?>" class="text-blue-600 hover:underline"><?php the_title(); ?></a></p>
                            </div>

                            <!-- 分享按钮 -->
                            <div class="flex items-center gap-3">
                                <span class="text-sm text-gray-500">分享到：</span>
                                <div class="flex items-center gap-2">
                                    <button class="w-8 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-600 transition-colors">
                                        <i data-lucide="wechat" class="w-4 h-4"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-600 transition-colors">
                                        <i data-lucide="twitter" class="w-4 h-4"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-600 transition-colors">
                                        <i data-lucide="link" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </div>
                        </footer>
                    </article>
                </main>

                <!-- 侧边栏 -->
                <aside class="w-full lg:w-80 flex-shrink-0">
                    <?php get_template_part('template-parts/sidebar', 'single'); ?>
                </aside>
            </div>
        </div>
    </div>
</div>

<!-- 阅读进度条 -->
<div class="fixed top-0 left-0 w-full h-1 bg-gray-100 z-50">
    <div id="reading-progress" class="h-full bg-blue-600 w-0 transition-all duration-150"></div>
</div>

<!-- 返回顶部按钮 -->
<button id="back-to-top" 
        class="fixed bottom-8 right-8 w-10 h-10 bg-white rounded-xl shadow-lg border border-gray-200
               flex items-center justify-center text-gray-500 hover:text-gray-900
               transition-all duration-300 opacity-0 invisible"
        onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
    <i data-lucide="arrow-up" class="w-5 h-5"></i>
</button>


<script>
// // 复制代码函数
// function copyCodeBlock(id) {
//     const codeElement = document.getElementById(`code-block-${id}`);
//     if (!codeElement) return;
    
//     const code = codeElement.textContent;
    
//     // 创建临时文本区域
//     const textarea = document.createElement('textarea');
//     textarea.value = code;
//     textarea.style.position = 'fixed';
//     textarea.style.opacity = '0';
//     document.body.appendChild(textarea);
    
//     // 选择并复制
//     textarea.select();
//     try {
//         document.execCommand('copy');
//         showToast('复制成功！');
//     } catch (err) {
//         console.error('复制失败:', err);
//         showToast('复制失败，请手动复制', 'error');
//     }
    
//     // 清理
//     document.body.removeChild(textarea);
// }

// // Toast 提示函数
// function showToast(message, type = 'success') {
//     const toast = document.getElementById('toast');
//     const icon = toast.querySelector('i');
//     const text = toast.querySelector('span');
    
//     // 设置消息
//     text.textContent = message;
    
//     // 设置图标
//     icon.setAttribute('data-lucide', type === 'success' ? 'check-circle' : 'alert-circle');
//     icon.className = `w-4 h-4 ${type === 'success' ? 'text-green-500' : 'text-yellow-500'}`;
//     if (typeof lucide !== 'undefined') {
//         lucide.createIcons();
//     }
    
//     // 显示 toast
//     toast.classList.remove('invisible', 'opacity-0', 'translate-y-[-1rem]');
//     toast.classList.add('opacity-100', 'translate-y-0');
    
//     // 2秒后隐藏
//     setTimeout(() => {
//         toast.classList.add('opacity-0', 'translate-y-[-1rem]');
//         setTimeout(() => toast.classList.add('invisible'), 300);
//     }, 2000);
// }
</script>

</div><!-- #content -->
</div><!-- #page -->

<?php get_footer(); ?>